<template>
  <div>
    <el-container>
      <el-header class="header"
        >{{ system_info.backstage_name }}
        <div class="userinfo">
          <el-button type="Info" @click="addNet"> 重启 </el-button>
          <span class="mr10 ml20">{{ username }}</span>
          <span @click="logout">[注销]</span>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px" class="aside scroll-container">
          <!-- 垂直导航 -->
          <el-menu
            :default-active="$route.path"
            router
            background-color="#2d323e"
            text-color="#eee"
            active-text-color="#fff"
            style="border-right: none"
            unique-opened
            :default-openeds="['1', '3']"
          >
            <el-menu-item index="/home/over-view"
              ><el-icon><House /></el-icon>总览</el-menu-item
            >
            <el-menu-item index="/home/serve-side">
              <el-icon><Grid /></el-icon>
              服务器
            </el-menu-item>
            <el-menu-item index="/home/simple-dev">
              <el-icon><Monitor /></el-icon>
              简单设备
            </el-menu-item>
            <el-menu-item index="/home/camera-dev">
              <el-icon><VideoCamera /></el-icon>
              摄像头
            </el-menu-item>
            <el-menu-item index="/home/sms-setting">
              <el-icon><Comment /></el-icon>
              短信设置
            </el-menu-item>
            <el-menu-item index="/home/alarm-setting">
              <el-icon><BellFilled /></el-icon>
              报警设置
            </el-menu-item>
            <el-menu-item index="/home/system-setting">
              <el-icon><Opportunity /></el-icon>
              系统设置
            </el-menu-item>
            <el-menu-item class="go_back" index="/net"> 返回前台 </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="main"><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const islogin = ref(false);
const username = ref();
let system_info = ref({});
onMounted(() => {
  //获取本地存储的用户信息
  username.value = localStorage.getItem("user");
  if (localStorage.getItem("system_info") !== null) {
    system_info.value = JSON.parse(localStorage.getItem("system_info"));
  }
});
//注销
function logout() {
  localStorage.removeItem("user");
}
</script>
<style scoped>
body {
  background-color: #f8f8f8;
}
.userinfo {
  color: #fff;
  float: right;
  font-size: 15px;
}
.userinfo span:hover {
  color: #999;
  cursor: pointer;
}
.header {
  background-color: #2d323e;
  color: #fff;
  line-height: 60px;
  font-size: 1.3em;
}
.aside {
  background-color: #2d323e;
  height: calc(100vh - 60px);
}
.main {
  height: calc(100vh - 60px);
}
.el-menu-item.is-active {
  font-weight: bold;
}
.el-menu {
  height: 100%;
}
.go_back {
  width: 100%;
  position: absolute;
  bottom: 10px;
}
</style>
